import { createStore } from 'vuex'
import axios from 'axios'
export default createStore({
  // 公共数据源
  state: {  // 存储数据
    songList: JSON.parse(localStorage.getItem('tracks')) || [],
    playerSetting: JSON.parse(localStorage.getItem('player-setting')) || [],
    lyricTmpObj: []
  },
  mutations: {  // 修改数据 执行同步任务
    deleteMusic (state, id) {
      state.songList = state.songList.filter((e) => {
        return e.id != id
      })
      state.playerSetting.index = 0;
      localStorage.setItem('player-setting', JSON.stringify(state.playerSetting))
      localStorage.setItem('tracks', JSON.stringify(state.songList))
    },
    addMusic (state, music) {
      let flag = false
      state.songList.forEach(element => {
        if (element.id == music[0].id) {
          flag = true
        }
      });
      if (flag) {
        return
      } else {
        state.songList = [...state.songList, ...music]
        localStorage.setItem('tracks', JSON.stringify(state.songList))
      }
    },
    playMu (state, music) {
      let flag = false
      state.songList.forEach(element => {
        if (element.id == music[0].id) {
          flag = true
        }
      });
      if (flag) {
        return
      } else {
        state.songList = [...state.songList, ...music]
        localStorage.setItem('tracks', JSON.stringify(state.songList))
        state.playerSetting.index = state.songList.length - 1
        localStorage.setItem('player-setting', JSON.stringify(state.playerSetting))
      }
    },
    switchPlayList (state, li) {
      state.songList = li;
      state.playerSetting.index = 0;
      localStorage.setItem('player-setting', JSON.stringify(state.playerSetting))
      localStorage.setItem('tracks', JSON.stringify(state.songList))
    },
    prevMusic (state) {
      let n = state.songList.length
      state.playerSetting.index--
      if (state.playerSetting.index < 0) {
        state.playerSetting.index = n - 1
      }
      localStorage.setItem('player-setting', JSON.stringify(state.playerSetting))
    },
    nextMusic (state) {
      let n = state.songList.length
      state.playerSetting.index++
      if (state.playerSetting.index > n - 1) {
        state.playerSetting.index = 0
      }
      localStorage.setItem('player-setting', JSON.stringify(state.playerSetting))
    },
    switchMusic (state, id) {
      let i = 0;
      state.songList.forEach((item, index) => {
        if (item.id == id) {
          i = index
        }
      })
      state.playerSetting.index = i;
      localStorage.setItem('player-setting', JSON.stringify(state.playerSetting))
    },
    // 格式化单词
    formatLyrics (state, lyrics) {
      let reg = /\[.+?\]/g;
      let time = lyrics.lyrics.match(reg);
      let contentArr = lyrics.lyrics.split(/\[.+?\]/).slice(1); // 按照[]拆分歌词字符串, 返回一个数组(下标为0位置元素不要,后面的留下所以截取)
      let lyricTmpObj = {};
      time.forEach((e, index) => {
        // 拆分[00:00.000]
        let ms = e.split(":")[0].split("")[2] * 60;
        // 拆分[00:00.000]这个格式字符串
        let ss =
          e.split(":")[1].split(".")[0].split("")[0] === "0"
            ? e.split(":")[1].split(".")[0].split("")[1]
            : e.split(":")[1].split(".")[0];
        // 秒数作为key, 对应歌词作为value
        if (contentArr[index] != "\n") {
          lyricTmpObj[ms + Number(ss)] = contentArr[index];
        }
      });
      state.lyricTmpObj = lyricTmpObj;
    },
  },
  actions: {    // 和mutation的功能大致相同，不同之处在于 ①Action提交的是mutation，而不是直接变更状态，②Action可以包含任意异步操作。
    // 获取单词
    getlyric ({ commit }, id) {
      axios({
        url: 'lyric',
        method: 'GET',
        params: {
          id: id
        }
      }).then(({ data: res }) => {
        commit('formatLyrics', { lyrics: res.lrc.lyric })
      })
    }
  },
  getters: { // 从基本数据（state）派生的数据，相当于state的计算属性；
    curMusic: state => {
      return state.songList[state.playerSetting.index]
    }
  }
})
